<ix-modal-header
  [requiredRoles]="requiredRoles"
  [title]="'Create ACME Certificate' | translate"
  [loading]="isLoading()"
></ix-modal-header>

<mat-card>
  <mat-card-content>
    <form class="ix-form-container" [formGroup]="form" (submit)="onSubmit()">
      <ix-fieldset>
        <ix-input
          formControlName="name"
          [label]="'Identifier' | translate"
          [required]="true"
          [tooltip]="helptext.edit.name.tooltip | translate"
        ></ix-input>

        <ix-checkbox
          formControlName="tos"
          [label]="'Terms of Service' | translate"
          [required]="true"
          [tooltip]="helptext.acme.tos.tooltip | translate"
        ></ix-checkbox>

        <ix-input
          formControlName="renew_days"
          type="number"
          [label]="'Renew Certificate Days' | translate"
          [required]="true"
          [tooltip]="helptext.acme.renewDay.tooltip | translate"
        ></ix-input>

        <ix-checkbox
          formControlName="custom_acme_directory_uri"
          [label]="'Custom ACME Server Directory URI' | translate"
          [tooltip]="helptext.acme.dirUri.customCheckboxTooltip | translate"
        ></ix-checkbox>

        @if (!!form.controls.custom_acme_directory_uri.value) {
          <ix-input
            formControlName="acme_directory_uri"
            [label]="'ACME Server Directory URI' | translate"
            [required]="true"
            [tooltip]="helptext.acme.dirUri.customInputTooltip | translate"
          ></ix-input>
        }

        @if (!form.controls.custom_acme_directory_uri.value) {
          <ix-select
            formControlName="acme_directory_uri"
            [required]="true"
            [label]="'ACME Server Directory URI' | translate"
            [options]="acmeDirectoryUris$"
            [tooltip]="helptext.acme.dirUri.tooltip | translate"
          ></ix-select>
        }
      </ix-fieldset>

      <ix-fieldset [title]="'Domains' | translate">
        <ix-list
          formArrayName="domains"
          [canAdd]="false"
          [formArray]="form.controls.domains"
        >
          @for (domain of domains; track domain; let i = $index) {
            <ix-list-item
              [canDelete]="false"
            >
              <ix-select
                class="list-item"
                [formControlName]="i"
                [label]="domain"
                [tooltip]="helptext.acme.authenticator.tooltip | translate"
                [options]="authenticators$"
                [required]="true"
              ></ix-select>
            </ix-list-item>
          }
        </ix-list>
      </ix-fieldset>

      <ix-form-actions>
        <button
          *ixRequiresRoles="requiredRoles"
          mat-button
          color="primary"
          type="submit"
          ixTest="save"
          [disabled]="isLoading() || form.invalid"
        >
          {{ 'Save' | translate }}
        </button>
      </ix-form-actions>
    </form>
  </mat-card-content>
</mat-card>
